<template>
  <div class="content">
      <JCard>
        <p slot="title">{{ title }}</p>
        <div class="content-box">
          <div class="left" ref="leftRef">
            <slot name="left"></slot>
          </div>
          <div class="right">
            <div class="right-code" :style="{height: codeHeight}">
              <div ref="codeRef">
                <slot name="right"></slot>
              </div>
            </div>
            <div :class="arrowClass" @click="arrorClick" v-if="arrowVisibility"></div>
          </div>
        </div>
      </JCard>
    </div>
</template>

<script>
export default {
  name: 'ExampleCode',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      arrowShow: false,
      arrowVisibility: false,
      codeHeight: ''
    }
  },
  methods: {
    arrorClick () {
      this.arrowShow = !this.arrowShow
      if (this.arrowShow) {
        this.codeHeight = this.$refs.codeRef.clientHeight + 'px'
      } else {
        this.codeHeight = this.$refs.leftRef.clientHeight + 'px'
      }
    }
  },
  computed: {
    arrowClass: function () {
      return [
        this.arrowShow ? 'right-arrow-active' : 'right-arrow'
      ]
    }
  },
  mounted () {
    if (this.$refs.codeRef.clientHeight < this.$refs.leftRef.clientHeight) {
      this.arrowVisibility = false
    } else {
      this.arrowVisibility = true
    }
  }

}
</script>

<style scoped>
  .content {
    margin-bottom: 20px;
  }
  .content .title{
    font-size: 20px;
    font-weight: 400;
    margin: 12px 0;
  }
  .content .content-box {
    width: 100%;
    height: 100%;
    display: flex;
  }
  .content .content-box .left {
    width: 50%;
    height: 100%;
    padding: 0 10px;
  }
  .content .content-box .right {
    width: 50%;
    padding: 0 10px;
  }
  .content-box .right-code {
    height: 200px;
    overflow: hidden;
  }
  .content-box .right-arrow::after {
    width: 40px;
    height: 20px;
    content: '﹀';
    display: block;
    margin: 0 auto;
    text-align: center  ;
    cursor: pointer;
  }
  .content-box .right-arrow-active::after {
    width: 40px;
    height: 20px;
    content: '︿';
    display: block;
    margin: 0 auto;
    text-align: center  ;
    cursor: pointer;
  }
  .content-box .right-arrow:hover, .content-box .right-arrow-active:hover {
    color: #3e76f6;
  }
</style>
